<!-- App.vue -->
<template>
  <div id="app">
    <router-view />
    <GuideTour 
      ref="guideTourRef"
      :steps="currentGuideSteps"
      @finish="handleGuideFinish"
      @skip="handleGuideSkip"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
// 主应用组件
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '@/stores/appStore'
import { useRoute } from 'vue-router'
import NavigationLayout from '@/components/navigation/NavigationLayout.vue'
import { keyboardManager } from '@/utils/keyboardManager'
import GuideTour from '@/components/guide/GuideTour.vue'
import { reconciliationGuideSteps, systemGuideSteps } from '@/config/guideSteps'

// 初始化应用状态
const appStore = useAppStore()
const route = useRoute()
const guideTourRef = ref<InstanceType<typeof GuideTour> | null>(null)

// 根据当前路由确定引导步骤
const currentGuideSteps = computed(() => {
  const path = route.path
  if (path.startsWith('/finance/reconciliation')) {
    return reconciliationGuideSteps
  } else {
    return systemGuideSteps
  }
})

const handleGuideFinish = () => {
  console.log('引导完成')
}

const handleGuideSkip = () => {
  console.log('引导跳过')
}

onMounted(() => {
  // 初始化键盘快捷键管理器
  keyboardManager
  
  // 注册引导快捷键
  keyboardManager.registerShortcut('F1', () => {
    guideTourRef.value?.startGuide()
  })
  
  // 模拟未读消息数量
  appStore.setShowUnreadCount(5)
})
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}

/* 设计Token系统 */
:root {
  /* 颜色系统 */
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  
  /* 背景色 */
  --bg-color: #f5f7fa;
  --sidebar-bg: #001529;
  --header-bg: #ffffff;
  
  /* 文字色 */
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  
  /* 边框 */
  --border-color: #dcdfe6;
  --border-radius: 4px;
  
  /* 阴影 */
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  /* 动效 */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>